<template>
  <div v-show="isShow" class="tpilist-container">
    <div class="tpilist-content">
      <div class="tpilist-content-left">
        <div class="tpilist-content-left-header">三检统计表</div>
        <div class="tpilist-content-left-content">
          <div class="content-table-header">{{ headerTime }}</div>
          <div class="content-table">
            <a-table
              :data-source="tpiArr"
              :pagination="false"
              :rowKey="record => record.id"
              :scroll="{ y: 415 }"
            >
              <a-table-column title="名称" data-index="name">
                <template #default="{text,record}">
                  <!--  <span :title="record.name" v-if="record.name.length > 15">{{
                    record.name.substring(0, 15) + '...'
                  }}</span>

                  <span v-else-if="record.name.length <= 15">{{
                    record.name
                  }}</span>-->
                  <span>{{ record.name }}</span>
                </template>
              </a-table-column>
              <a-table-column
                title="P坐标"
                data-index="positionX"
                width="110px"
              >
                <template #default="{text,record}">
                  <!--  <span :title="record.A" v-if="record.A.length > 7">{{
                    record.A.substring(0, 7) + '...'
                  }}</span>

                  <span v-else-if="record.A.length <= 7">{{ record.A }}</span>-->
                  <span>{{ record.positionX }}</span>
                </template>
              </a-table-column>
              <a-table-column
                title="H坐标"
                data-index="positionY"
                width="110px"
              >
                <template #default="{text,record}">
                  <!-- <span :title="record.B" v-if="record.B.length > 7">{{
                    record.B.substring(0, 7) + '...'
                  }}</span>

                  <span v-else-if="record.B.length <= 7">{{ record.B }}</span> -->
                  <span>{{ record.positionY }}</span>
                </template>
              </a-table-column>
              <a-table-column title="检测状态" data-index="statue" width="80px">
                <template #default="{text,record}">
                  <div
                    v-if="record.statue === '1'"
                    class="tdstatueCls statueCls1"
                  >
                    待检测
                  </div>
                  <div
                    v-else-if="record.statue === '2'"
                    class="tdstatueCls statueCls2"
                  >
                    检测中
                  </div>
                  <div
                    v-else-if="record.statue === '3'"
                    class="tdstatueCls statueCls3"
                  >
                    整改中
                  </div>
                  <div v-else class="tdstatueCls statueCls4">检测完成</div>
                </template>
              </a-table-column>
              <!-- <a-table-column
                title="检测时间"
                data-index="checktime"
              ></a-table-column>
              <a-table-column
                title="检测人"
                data-index="checkuser"
                width="80px"
              >
                <template #default="{text,record}">
                  <span
                    :title="record.checkuser"
                    v-if="record.checkuser.length > 6"
                    >{{ record.checkuser.substring(0, 6) + '...' }}</span
                  >

                  <span v-else-if="record.checkuser.length <= 6">{{
                    record.checkuser
                  }}</span>
                </template>
              </a-table-column> -->
              <a-table-column title="详情" data-index="id" width="50px">
                <template #default="{text,record}">
                  <a-image
                    :width="18"
                    :height="18"
                    :src="detailImg"
                    :preview="false"
                    @click="showDetail(record)"
                  />
                </template>
              </a-table-column>
            </a-table>
          </div>
        </div>
      </div>
      <div class="tpilist-content-right">
        <div class="tpilist-content-right-header">检测信息详情</div>
        <div class="tpilist-content-right-content">
          <div class="circleDiv" v-show="pass">
            <a-image
              :width="60"
              :height="60"
              :src="passCircle"
              :preview="false"
            />
          </div>
          <div class="circleDiv" v-show="nopass">
            <a-image
              :width="60"
              :height="60"
              :src="nopassCircle"
              :preview="false"
            />
          </div>
          <a-form
            :model="tpiObj"
            :labelCol="{ style: 'width: 60px' }"
            labelAlign="left"
          >
            <a-form-item label="名称" :colon="false">
              {{ tpiObj.name }}
            </a-form-item>
            <a-form-item label="P坐标" :colon="false">
              {{ tpiObj.positionX }}
            </a-form-item>
            <a-form-item label="H坐标" :colon="false">
              {{ tpiObj.positionY }}
            </a-form-item>
            <a-form-item label="检测类型" :colon="false">
              <div
                v-for="(item, index) in tpiObj.typeArr"
                :key="index"
                :style="{ 'margin-top': index === 0 ? '0px' : '12px' }"
              >
                <span>{{ item.typeValue }}</span
                >:
                <span>{{ item.value }}</span>
              </div>
            </a-form-item>
            <a-form-item label="现场照片" :colon="false">
              <div
                v-for="(item, index) in tpiObj.imgfileList"
                :key="index"
                class="imgListDiv"
              >
                <a-image :width="68" :height="68" :src="item.url" />
              </div>
            </a-form-item>
            <a-form-item label="检测报告" :colon="false" class="reportItemCls">
              <div
                class="fileShowCls"
                style=""
                v-for="(item, index) in tpiObj.reportfileList"
                :key="index"
              >
                <a-image
                  :width="22"
                  :height="22"
                  :src="fileImg"
                  :preview="false"
                  style="    margin-left: 4px;"
                />
                <div class="filenamecls" @click="showFile(item.url)">
                  {{ item.fileName }}
                </div>
              </div>
            </a-form-item>
            <a-form-item label="备注" :colon="false">
              <span
                style="width: 370px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;cursor: pointer;"
                :title="tpiObj.remark"
                >{{ tpiObj.remark }}</span
              >
            </a-form-item>
            <a-form-item label="检测时间" :colon="false">
              {{ tpiObj.detectionTime }}
            </a-form-item>
            <a-form-item label="检测人" :colon="false">
              <div>
                {{ tpiObj.inspector }}
              </div>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { defineComponent, ref } from 'vue'
import { message } from 'ant-design-vue'
import axios from 'axios'
import moment from 'moment'
import detailImg from '@/assets/image/detailImg.png'
import fileImg from '@/assets/image/fileImg.png'
import passCircle from '@/assets/image/passCircle.png'
import nopassCircle from '@/assets/image/nopassCircle.png'
import config from '@/config/index'
export default defineComponent({
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const store = useStore()
    const tpiArr = ref(new Array<any>())
    const headerTime = ref()
    const selCellId = ref<number>()
    const pass = ref<boolean>(false)
    const nopass = ref<boolean>(false)

    const sysType = ref(new Array<any>())
    const statusObj = ref<any>({
      待检测: '1',
      检测中: '2',
      整改中: '3',
      检测完成: '4'
    })
    // const host = ref<string>('https://zhihuigongdi.cn/haerbin/Api')
    const tpiObj = ref<any>({
      id: -1,
      name: '',
      positionX: '',
      positionY: '',
      typeArr: [],
      imgfileList: new Array<any>(),
      reportfileList: new Array<any>(),
      remark: '',
      detectionTime: null,
      inspector: ''
    })
    const getTypeSysDic = () => {
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url = config.cityUrlPath + '/detection/system-dic/compaction/'
        axios.get(url).then((res: any) => {
          sysType.value = res.data
        })
      }
    }
    //获得三检列表
    const getTpiList = (cellId: number) => {
      const userinfo = store.getters['userinfo/getUserInfo']
      tpiArr.value = []
      if (userinfo) {
        const url = config.cityUrlPath + '/detection/work-unit/' + cellId
        axios.get(url).then((res: any) => {
          if (res.success) {
            const arr = res.data

            for (let i = 0; i < arr.length; i++) {
              tpiArr.value.push({
                id: arr[i].id,
                name: arr[i].name,
                positionX: arr[i].positionX.toFixed(2),
                positionY: arr[i].positionY.toFixed(2),
                statueText: arr[i].status,
                statue: statusObj.value[arr[i].status]
              })
            }
          } else {
            message.info(res.errorMsg)
          }
        })
      }
    }

    const cleanTpiObj = () => {
      tpiObj.value.id = -1
      tpiObj.value.name = ''
      tpiObj.value.positionX = ''
      tpiObj.value.positionY = ''
      tpiObj.value.typeArr = []
      tpiObj.value.imgfileList = []
      tpiObj.value.reportfileList = []
      tpiObj.value.remark = ''
      tpiObj.value.detectionTime = null
      tpiObj.value.inspector = ''
    }
    const getPointDetail = (pointId: number) => {
      //index 0编辑1详情
      pass.value = false
      nopass.value = false
      cleanTpiObj()
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url = config.cityUrlPath + '/detection/points/' + pointId
        axios.get(url).then((res: any) => {
          if (res.success) {
            const arr = res.data
            if (arr.length > 0) {
              tpiObj.value.id = arr[0].id
              tpiObj.value.name = arr[0].name
              tpiObj.value.positionX = arr[0].positionX
              tpiObj.value.positionY = arr[0].positionY
              tpiObj.value.creator = arr[0].creator
              tpiObj.value.remark = arr[0].remark
              tpiObj.value.detectionTime = arr[0].detectionTime

              const values = arr[0].values
              switch (arr[0].status) {
                case '待检测':
                  pass.value = false
                  nopass.value = false
                  break
                case '检测中':
                  pass.value = false
                  nopass.value = false
                  break
                case '整改中':
                  pass.value = false
                  nopass.value = true
                  break
                case '检测完成':
                  pass.value = true
                  nopass.value = false
                  break
              }
              let len = values.length
              tpiObj.value.typeArr = []
              console.log(sysType.value)
              for (let j = 0; j < len; j++) {
                let typeValue = ''
                const temparr = sysType.value.filter(
                  item => item.key == values[j].item
                )
                if (temparr.length > 0) {
                  typeValue = temparr[0].value
                }
                tpiObj.value.typeArr.push({
                  type: values[j].item,
                  value: values[j].value,
                  typeValue: typeValue
                })
              }

              tpiObj.value.inspector = arr[0].inspector
              const attachments = arr[0].attachments
              for (let k = 0; k < attachments.length; k++) {
                if (attachments[k].category == '现场照片') {
                  tpiObj.value.imgfileList.push({
                    url: attachments[k].fileUrl,
                    id: attachments[k].id,
                    pointId: attachments[k].detectionPointId,
                    fileName: attachments[k].fileName,
                    createTime: attachments[k].createTime
                  })
                } else {
                  tpiObj.value.reportfileList.push({
                    url: attachments[k].fileUrl,
                    id: attachments[k].id,
                    pointId: attachments[k].detectionPointId,
                    fileName: attachments[k].fileName,
                    createTime: attachments[k].createTime
                  })
                }
              }
            } else {
              cleanTpiObj()
            }
          } else {
            message.info(res.errorMsg)
          }
        })
      }
    }
    const showDetail = (data: any) => {
      getPointDetail(data.id)
    }
    const showFile = (url: string) => {
      window.open(url, '_blank')
    }
    const tpiListInit = (cellId: number) => {
      selCellId.value = cellId
      headerTime.value =
        '刷新时间：' + moment(new Date()).format('yyyy-MM-DD HH:mm:ss')
      getTypeSysDic()
      getTpiList(cellId)
      pass.value = false
      nopass.value = false
      cleanTpiObj()
    }

    return {
      moment,
      headerTime,
      tpiArr,
      tpiObj,
      detailImg,
      fileImg,
      passCircle,
      nopassCircle,
      tpiListInit,
      getTpiList,
      selCellId,
      // host,
      statusObj,
      cleanTpiObj,
      getPointDetail,
      getTypeSysDic,
      showDetail,
      sysType,
      showFile,
      pass,
      nopass
    }
  },
  components: {}
})
</script>

<style lang="scss" scoped>
.tpilist-container {
  font-family: PingFangSC-Semibold, PingFang SC;
  width: 1180px;
  height: 520px;
  // background: rgba(230, 241, 252, 0.22);
  // opacity: 0.2;
  .tpilist-content-left {
    width: 712px;
    height: 520px;
    // background: rgba(22, 119, 255, 0.15);
    // opacity: 0.11;
    float: left;
    .tpilist-content-left-header {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      text-align: center;
    }
    .tpilist-content-left-content {
      margin-left: 25px;
      .content-table-header {
        font-size: 12px;
        color: #333333;
      }
      .content-table {
        margin-top: 9px;
        margin-right: 25px;
        ::v-deep .ant-table-thead > tr > th {
          padding: 10px 0px !important;
        }
        ::v-deep .ant-table-tbody > tr > td {
          padding: 18px 0px !important;
        }
        .tdstatueCls {
          width: 60px;
          height: 22px;
          border-radius: 2px;
          line-height: 22px;
          font-size: 12px;
          font-weight: 400;
          margin-left: 10px;
        }
        .statueCls1 {
          border: 1px solid #ff9c01;
          color: #ff9c01;
        }
        .statueCls2 {
          border: 1px solid #1677ff;
          color: #1677ff;
        }
        .statueCls3 {
          border: 1px solid #d1462f;
          color: #d1462f;
        }
        .statueCls4 {
          border: 1px solid #19a160;
          color: #19a160;
        }
      }
    }
  }
  .tpilist-content-right {
    width: 447px;
    height: 520px;
    // background: rgba(22, 119, 255, 0.15);
    // opacity: 0.11;
    margin-left: 20px;
    float: right;
    .tpilist-content-right-header {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      text-align: center;
    }
    .tpilist-content-right-content {
      height: 450px;
      overflow-y: auto;
      margin-top: 40px;
      .circleDiv {
        position: absolute;
        right: 62px;
      }

      .reportItemCls {
        ::v-deep .ant-form-item-control {
          width: 144px;
        }
      }
      .ant-form-item {
        margin-bottom: 10px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;

        ::v-deep .ant-form-item-label-left {
          line-height: 16px;
        }
        ::v-deep .ant-form-item-control {
          line-height: 16px;
        }
        ::v-deep .ant-col {
          width: 370px;
        }
        .fileShowCls {
          width: 144px;
          height: 40px;
          background: #e6f1fc;
          display: inline-block;
          opacity: 0.66;
          float: left;
          margin-right: 8px;
          margin-bottom: 4px;
          ::v-deep .ant-image {
            position: relative;
            top: -9px;
          }
          .filenamecls {
            width: 78px;

            font-size: 12px;

            font-weight: 400;
            color: #666666;

            margin-left: 8px;
            margin-right: 8px;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 24px;
            line-height: 24px;
            margin-top: 8px;
            cursor: pointer;
          }
        }
        .imgListDiv {
          display: inline-block;
          margin-right: 12px;
          width: 68px;
          height: 68px;
          ::v-deep .ant-image-img {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
